<template>
  <div>
    <!-- 历史采购列表开始 -->
    <el-table :data="tableData" style="width: 100%" border="" fit highlight-current-row>
      <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
      <el-table-column prop="goods" label="物品名称"  align="center"></el-table-column>
      <el-table-column prop="date" label="采购日期" align="center" width="200"></el-table-column>
      <el-table-column prop="unit" label="单位" align="center" width="150"></el-table-column>
      <el-table-column prop="number" label="数量" align="center" width="150"></el-table-column>
      <el-table-column prop="price" label="价格" align="center" width="150"></el-table-column>
      <el-table-column prop="notice" label="备注" align="center" width="150"></el-table-column>
      <el-table-column prop="edit" label="编辑" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="editPurchase(scope.row.id,scope.row)"
          ></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="delPurchase(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 历史采购列表结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      sureSub: "",
      edit: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      tableData: [
        {
          id: "1",
          goods: "鼠标 ",
          unit: "件",
          date: '2020-03-21',
          number: "5",
          notice: "",
          state: "",
          value: false
        },
        {
          id: "2",
          goods: "键盘",
          unit: "件",
          date: '2020-03-21',
          number: "5",
          notice: "",
          state: "",
          value: false
        },
        {
          id: "3",
          goods: "显示器",
          unit: "台",
          date: '2020-03-21',
          number: "5",
          notice: "",
          state: "",
          value: false
        },
        {
          id: "4",
          goods: "机箱",
          unit: "台",
          date: '2020-03-21',
          number: "5",
          notice: "",
          state: "",
          value: false
        }
      ],
      ruleForm: {
        price: "",
        model: "",
        notice: "",
        number: "",
        goods: "",
        unit: ""
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm () {
      //this.$refs[formName].resetFields()
      this.ruleForm = {
        price: "",
        model: "",
        notice: "",
        number: "",
        goods: "",
        unit: ""
      };
    },
    editPurchase (i, info) {
      this.dialogFormVisible = true;
      this.edit = "修改采购申请单";
      this.sureSub = "确认修改";
      // this.ruleForm
      console.log(info);
      this.ruleForm = info;
    },
    delPurchase (id) {
      console.log(id);
      this.$confirm("此操作将永久删除该申请单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
  }
};
</script>
